<template>
  <div class="container">
    <div class="canvas" ref="canvas"></div>
    <!-- 右边属性栏部分 -->
    <div id="js-properties-panel" class="panel"></div>
  </div>
</template>

<script>
// 引入相关依赖
import BpmnModeler from 'bpmn-js/lib/Modeler'
import { xmlStr } from '@/mock/xmlStr' // 直接引用 xml格式
// 使用右侧属性栏
import propertiesPanelModule from 'bpmn-js-properties-panel'
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'

// 汉化
import customTranslate from '@/utils/customTranslate'
export default {
  name: 'basic',
  data () {
    return {
      bpmnModeler: null, // bpmn 建模器
      container: null,
      canvas: null
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      // 获取canvas的dom节点
      const canvas = this.$refs.canvas
      // 将汉化包装成一个模块
      const customTranslateModule = {
        translate: ['value', customTranslate]
      }
      // 建模，创建 bpmn 对象
      this.bpmnModeler = new BpmnModeler({
        container: canvas,
        // 添加控制板
        propertiesPanel: {
          parent: '#js-properties-panel'
        },
        additionalModules: [
          // 右边的属性栏
          propertiesProviderModule,
          propertiesPanelModule,
          // 汉化模块
          customTranslateModule
        ],
        moddleExtensions: {
          camunda: camundaModdleDescriptor
        }
      })
      this.createNewDiagram()
    },
    createNewDiagram () {
      // 将字符串转换成图显示出来
      try {
        const result = this.bpmnModeler.importXML(xmlStr)
        const { warnings } = result
        console.log(warnings)
      } catch (err) {
        console.log(err.message, err.warnings)
      }
    }
  }
}
</script>

<style scoped>
.container {
  position: relative;
  width: 100%;
  height: 100%;
}
.canvas {
  width: 100%;
  height: 100%;
}
.panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
}
</style>